<template>
  <div class="drawer">
    <div class="drawer-title">
      <span>签到情况</span>
      <a-icon class="close-icon" type="close" @click="handleDrawer" />
    </div>
    <div class="drawer-body">
      <!-- <a-month-picker v-model="signInYears" :disabled-date="disabledDate" format="YYYY-MM" valueFormat="YYYY-MM"
        placeholder="请选择年月" @change="changeDate" style="width:40%;margin-bottom:20px;" /> -->
      <h3>签到统计</h3>
      <a-list item-layout="vertical" :data-source="signInStatisticss" :grid="{ column: 2, gutter: 48 }">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <a-icon slot="extra" :type="item.iconType" style="font-size: 40px;color: #2b7cd9;" />
          <a-list-item-meta :description="item.description">
            <h5 slot="title">{{ item.title }}</h5>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
      <h3 style="position: relative;">假勤统计
        <a style="position: absolute;right: 0;font-size: 14px;font-weight: normal;" @click="toggle = !toggle">
          <span v-if="toggle">查看详情</span>
          <a-icon v-else type="close" />
        </a>
      </h3>
      <a-list :data-source="outLeaveDatas1" v-if="toggle">
        <a-list-item slot="renderItem" slot-scope="item, index">
          <template slot="actions"> {{item.value}} </template>
          <a-list-item-meta :title="item.title" />
        </a-list-item>
      </a-list>
      <a-table v-else :columns="outLeaveColumns" :data-source="outLeaveDatas2" :pagination="false" />
      <h3>签到日历</h3>
      <div class="con-content-list">
        <a-space style="margin-bottom: 20px;">
          <a-badge v-for="(item, index) in badges" :key="index" :status="item.status" :text="item.text" />
        </a-space>
        <a-calendar v-model="calendarValue" :header-render="headerRender" valueFormat="YYYY-MM-DD"
          @change="rangePickerChange">
          <ul slot="dateCellRender" slot-scope="value" class="events">
            <li v-for="(item, index) in getListData(value)" :key="index">
              <a-tooltip :title="item.content">
                <a-badge :status="item.type" :class="'ant-badge-text-' + item.type" />
              </a-tooltip>
            </li>
          </ul>
        </a-calendar>
        <div v-if="isShowsignInDel">
          <h4 style="font-weight: bold;">签到详情</h4>
          <p>
            <span class="strong">签到情况：</span><span>{{ signInDel ? signInDel : '无' }}</span>
          </p>
          <p>
            <span class="strong">签到时间：</span><span>{{ signInTime ? signInTime : '无' }}</span>
          </p>
          <p>
            <span class="strong">签到地点：</span><a>{{ signInPlace ? signInPlace : '无' }}</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import * as serviceApi from '@/api/sjsk/clinicmanageService'
export default {
  data() {
    return {
      userId: null,
      caseNo: null,
      calendarValue: '',
      calendarVos: [],
      signInDel: '',
      signInTime: '',
      signInPlace: '',
      signInYears: '',
      isShowsignInDel: false,
      toggle: true,
      outLeaveDatas1: [
        { title: '请假次数', key: 'outLeaveNum', value: '0次' },
        { title: '请假时长', key: 'outLeaveDuration', value: '0次' },
      ],
      outLeaveColumns: [
        { title: '请假时间', dataIndex: 'time', width: 100, align: 'center', customRender: (text, record, index) => { return record.startDate && record.endDate? record.startDate+'~'+record.endDate:'--' } },
        { title: '请假天数', dataIndex: 'outDay', width: 60, align: 'center' },
        { title: '请假理由', dataIndex: 'outReason', width: 60, align: 'center',customRender: text => { return <j-ellipsis value={text} length={8} /> } },
      ],
      outLeaveDatas2: [],
      badges: [
        { text: '未签到', status: 'default' },
        { text: '已签到', status: 'processing' },
        { text: '已请假', status: 'warning' },
      ],
      signInStatisticss: [
        { title: '应签到人数', iconType: 'calendar', prop: 'shouldMonthSignInDays', description: '0', },
        { title: '应签到天数', iconType: 'carry-out', prop: 'actMonthSignInDays', description: '0', },
        { title: '漏签到人数', iconType: 'funnel-plot', prop: 'missSignInDays', description: '0', },
        { title: '平均签到率', iconType: 'pie-chart', prop: 'signInRate', description: '0%', }
      ]
    }
  },
  created() {
    this.signInYears = this.$options.filters.moment(new Date(), 'YYYY-MM')
    this.getRouteQuery(this.$route)
  },
  watch: {
    $route(data) {
      this.getRouteQuery(data)
    },
    userId(value) {
      this.getSignInDetail(value, this.signInYears)
      this.getOutLeaveCount(value, this.signInYears)
    }
  },
  methods: {
    moment,
    // 签到详情
    getSignInDetail(id, signInYears) {
      serviceApi.getSignInDetail({ userId: id, caseNo: this.caseNo, signInYears: signInYears }).then((res) => {
        if (res.success) {
          const { result } = res
          let obj = {
            shouldMonthSignInDays: result.shouldMonthSignInDays,
            actMonthSignInDays: result.actMonthSignInDays,
            missSignInDays: result.missSignInDays,
            signInRate: result.signInRate + '%'
          }
          for (let key in obj) {
            let num = obj[key] ? obj[key] : 0
            for (let item of this.signInStatisticss) {
              if (key === item.prop) {
                this.$set(item, 'description', num)
              }
            }
          }
          this.calendarVos = result.calendarVos.map(v => {
            return {
              signDate: this.$options.filters.moment(v.signTime, 'YYYY-MM-DD'),
              signTime: v.signTime,
              signPlace: v.signPlace,
              status: v.signStatus,
              location: v.location,
            }
          })
          this.rangePickerChange(new Date());
        } else {
          this.$message.warn(res.message)
        }
      })
        .catch((e) => {
          this.$message.warn('请求失败！')
        })
    },
    // 请假详情
    getOutLeaveCount(id, signInYears){
      serviceApi.getOutLeaveCount({ sjskPersonId: id, currentMonth: signInYears }).then((res) => {
        if (res.success) {
          const { result } = res
          this.outLeaveDatas1.forEach((item) => {
            if(item.key==='outLeaveNum') {
              item.value =  result['outLeaveNum']?result['outLeaveNum']+'次': '0次'
            }
            if(item.key==='outLeaveDuration') {
              item.value = result['outLeaveDuration']?result['outLeaveDuration']+'次': '0次'
            }
          })
          this.outLeaveDatas2 = result.outLeaveRecord.map((v, i)=> {
            return {
              key: i,
              ...v
            }
          })
        } else {
          this.$message.warn(res.message)
        }
      })
      .catch((e) => {
        this.$message.warn('请求失败！')
      })
    },
    getListData(value) {
      let listData
      let defaultContent = '未签到'
      let processingContent = '已签到'
      let warningContent = '已请假'
      this.calendarVos.forEach((item) => {
        if (item.signDate === value.format('YYYY-MM-DD')) {
          if (!item.signTime) {
            listData = [{ type: 'default', content: defaultContent }]
          } else if (item.signTime) {
            listData = [{ type: 'processing', content: processingContent }]
          }  else if (item.status === '2') {
            listData = [{ type: 'warning', content: warningContent }]
          }
        } //else if() {
          //listData = [{ type: 'default', content: defaultContent }]
        //}
      })
      return listData || []
    },
    // 日期变化时触发
    rangePickerChange(e) {
      let dateStr = this.$options.filters.moment(e, 'YYYY-MM-DD')
      this.isShowsignInDel = true
      let calendars = this.calendarVos.filter((col, i) => col.signDate === dateStr) || []
      if (calendars.length>0) {
        let item = calendars[0]
        this.signInDel = '正常签到'
        this.signInTime = item.signTime
        this.signInPlace = item.signPlace
      } else {
        this.signInDel = '未签到'
        this.signInTime = ''
        this.signInPlace = ''
      }
    },
    disabledDate(current) {
      return current && current > moment().endOf('day');
    },
    changeDate(value) {
      this.getSignInDetail(this.userId, value)
    },
    handleDrawer() {
      this.$emit('handleDrawer')
    },
    headerRender({ value, type, onChange, onTypeChange }) {
      return ''//this.calendarValue
    },
    // 监听路由变化
    getRouteQuery($route) {
      if ($route.params || $route.query) {
        const { params, query } = $route
        if (params.id) this.userId = params.id
        if (query.caseNo) this.caseNo = query.caseNo
      }
    }
  }
}
</script>
<style lang="less" scoped>
.drawer {
  width: 600px;
  position: absolute;
  right: -12px;
  top: -12px;
  bottom: 0;
  background-color: #fff;
  border-left: 1px #e8e8e8 solid;
  overflow-x: auto;

  .drawer-title {
    background-color: #fff;
    border-bottom: 1px #e8e8e8 solid;
    display: flex;
    padding: 16px 20px;
    justify-content: space-between;
    align-items: center;

    span {
      font-size: 16px;
      font-weight: 600;
    }

    .close-icon {
      color: #333;
      font-size: 16px;
    }
  }

  .drawer-body {
    padding: 20px;
    position: relative;

    >h3 {
      padding: 10px 0;
      font-weight: bold;
    }
  }
}

:deep(.ant-list-grid .ant-col > .ant-list-item) {
  display: flex;
}

:deep(.ant-list-split .ant-list-item:last-child) {
  border-bottom: 1px solid #e8e8e8;
}

.con-content-list {
  border: 1px #e8e8e8 solid;
  border-radius: 6px;
  padding: 16px 16px 0 16px;
}

/deep/.ant-fullcalendar-fullscreen {
  .ant-fullcalendar-calendar-body {
    padding: 0;
  }

  .ant-fullcalendar-header .ant-radio-group {
    display: none;
  }

  .ant-fullcalendar-date {
    height: 60px;
  }

  ul {
    padding: 0;
  }

  li::marker {
    content: '';
  }

  .ant-badge-status-text {
    margin-left: 0;
  }

  .ant-fullcalendar-content {
    height: auto;
    text-align: right;
    overflow-y: initial;
  }
}
</style>
